<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page import="com.lp.cfg.ProConfig"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html>
<html>
<head>
<%@ include file="/WEB-INF/oss/iot/common/variable.jsp"%>
<%@ include file="/WEB-INF/oss/iot/common/variable_js.jsp"%>
<%@ include file="/WEB-INF/oss/iot/common/resource_lib.jsp"%>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=<%=ProConfig.Map.BAIDU_MAP_KEY%>"></script>
<link type="text/css" href="<%=basePath%>/css/oss/iot/index.css?<%=v%>" rel="stylesheet"/>
<style type="text/css">
	.layui-layer.layui-layer-page{
		width:auto !important;
	}
	.title-span{
		width: 130px;
		text-align:center ;
		display: inline-block;
		color: #999;
	}
</style>
</head>
<body>
	<div>
		<div style="background: #ecf0f5;">
			<div class="mapContainer" >
				<div id="map"></div>
				<div class="show_index hide">
					<div>
						<span class="app_name">Project Name:</span>
						<span class="app_name_value"></span>
					</div>
					<div>
						<span class="app_name">Note information:</span>
						<span class="app_desc_value"></span>
					</div>
				</div>
			</div>
			
		</div>
	</div>

	<div class="hide" id="detailInfos">
		<div style="padding: 20px;line-height: 30px;font-size: 16px;width: 350px;color:#3499da;">
			<div>
				<span class="title-span">Project Information:</span> <span>{scene_name}</span>
			</div>
			<div>
				<span class="title-span">Device Name:</span> <span>{name}</span>			
			</div>
			<div>
				<span class="title-span">Location value:</span> <span>{lonLat}</span>			
			</div>
			<div>
				<span class="title-span">Update time:</span> <span>[mtime]</span>			
			</div>
			<div style="    text-align: right;padding-right: 60px;text-decoration: underline;">
				
			</div>
		</div>
	</div>

	<div class="template2 hide">
		<div class="map_info_window" style="width: 430px;">
			<div class="map_info_titles" style="margin-bottom: 0;"> 
				<h4><img src="<%=basePath%>/image/oss/iot/device_ico.png" class="icondevice">  
				<span style="vertical-align: middle;">{0} [Device SN:{1}]</span> 
				<br>
			</div>  
			<div class="map_info_item" style="overflow: hidden;zoom:1;">
				{2}
			</div> 
		</div>
	</div>
	<div class="template3 hide">
		<div style="width: 50%;float: left;padding:3px 0;">
			<div style="width: 50%;float: left;">
				<span class="sensor-info">{0}</span>
			</div>
			<div style="width: 50%;float: left;">
				<span style="font-size: 20px;color: #3499da;">{1}</span>
				<span>{2}</span>
			</div>
		</div>
	</div>

</body>
<script type="text/javascript">

var map ,dataCache  ;

$(function(){
	
	map = new BMap.Map("map");    // 创建Map实例
	map.setMapStyle({
        styleJson: [{
            "featureType": "road",//道路
            "elementType": "all",
            "stylers": {
                "color": "#ffffff",
                "visibility": "off"
            }
        },
        {
            "featureType": "building",
            "elementType": "all",
            "stylers": {
                "visibility": "off"
            }
        },
        {
            "featureType": "poilabel",//景点
            "elementType": "all",
            "stylers": {
                "visibility": "off"
            } 
        },
        {
            "featureType": "manmade",//学院
            "elementType": "all",
            "stylers": {
                "visibility": "off"
            }
        }
        ]
    });
	
	function setTextShowMap(lon,lat ,obj){
		var point = new BMap.Point(lon,lat);
		var opts = {
		  position : point,    // 指定文本标注所在的地理位置
		  offset   : new BMap.Size(2, -27)    //设置文本偏移量
		}
		var label = new BMap.Label(dataCache[obj].name , opts); 
			label.setStyle({
				 fontSize : "12px",
				 fontFamily:"微软雅黑"
			 });
		map.addOverlay(label);   
	}
	
	map.centerAndZoom('成都', 6);  // 初始化地图,设置中心点坐标和地图级别
	
	//添加地图类型控件
	map.addControl(new BMap.MapTypeControl({
		mapTypes:[
	        BMAP_NORMAL_MAP,
	        BMAP_HYBRID_MAP
	    ]}));
	
	map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

	// 地址设置标记点
	function selfLocation(lon,lat,obj){

		var iconName = 'location2_red.png' ;
		if( dataCache[obj].iot_node_status == 16 ){
			// 已连接
			iconName = 'location2.png' ;
		}
		//单独设定图标的样式
		var icon = new BMap.Icon('<%=basePath%>/image/oss/iot/'+iconName, new BMap.Size(32, 32), {
		   anchor: new BMap.Size(32, 32)
		});
		//创建一个图像标注实例。point参数指定了图像标注所在的地理位置
		var mkr = new BMap.Marker(new BMap.Point(lon,lat), {
			icon: icon
		});
		
		mkr.addEventListener("click", function () {
			var xxm = this ;
			// 弹出列表传感器列表信息
			postAjax(localUrl+"/page/sensor.json?pageSize=300&paged=1", {node_id :dataCache[obj].id },function(data){
				var sContent = $(".template2").html().format(dataCache[obj].name , dataCache[obj].device_code , generateSensor(data)  );
				var opts = {
		        	offset: new BMap.Size(-3, -40)
		        }
				var infoWindow = new BMap.InfoWindow(sContent,opts  );  // 创建信息窗口对象
				xxm.openInfoWindow(infoWindow);
			});
		});
		mkr.addEventListener("mouseover", function(e) {

		});
		mkr.addEventListener("mouseout", function(e) {

		});
		//将覆盖物添加到地图中
		map.addOverlay(mkr);
		//将地图的中心点更改为给定的点
// 		map.panTo(lon, lat);
// 		map.centerAndZoom(new BMap.Point(lon, lat), 8);
	}

	//生成传感器控制代码
	function generateSensor(data){
		var s = '' ;
		if(isOK(data)){
			var dataT = data.data.data ;
			for(var i=0;i<dataT.length;i++){
				if( dataT[i].iot_sensor_type == 25 ){
					s += $(".template3").html().format(dataT[i].name , gdv(dataT[i].sdata,0) ,dataT[i].data.measure_unit_type );
				}else if( dataT[i].iot_sensor_type == 26 || dataT[i].iot_sensor_type == 27  ){
					s += $(".template3").html().format(dataT[i].name ,gdv(dataT[i].data.measure_unit_type,'-') ,"" );
				}
			}
		}
		return s ;
	}
	
	udpDeviceInfo();
	
	setInterval(function() {
		map.clearOverlays();
		udpDeviceInfo();
	}, 15000);
	

	// 更新设备信息
	function udpDeviceInfo(){
		// 请求所有的设备信息
		commonAjax('POST', localUrl + '/page/node.json?paged=1&pageSize=1000', {}, function(data) {
				if (isOK(data)) {
					for (var i = 0; i < data.data.data.length; i++) {
						dataCache = data.data.data;
						if( validater.empty( dataCache[i].lonLat ) ){
							continue ;
						}
						if (dataCache[i].lonLat.indexOf(",") > -1) {
							selfLocation(dataCache[i].lonLat.split(",")[0],
									dataCache[i].lonLat.split(",")[1], i);
						}
					}
				}
		 });
	}
	
	
})
</script>
</html>